<template>
    <div>
        <div class="content-l treeBar">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true"
                     :default-expand-all="true"></el-tree>
        </div>
        <div class="content-r">
            <breadcrumb :title="'系统信息'"></breadcrumb>
            <el-form ref="form" :model="form" label-width="40%">
                <el-form-item label="系统名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="管理部门">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="管理部门">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="系统编码">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item class="btn">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                input: '',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                data: [{
                    label: '一级 1',
                    children: [{
                        label: '二级 1-1',
                        children: [{
                            label: '三级 1-1-1'
                        }]
                    }]
                }, {
                    label: '一级 2',
                    children: [{
                        label: '二级 2-1',
                        children: [{
                            label: '三级 2-1-1'
                        }]
                    }, {
                        label: '二级 2-2',
                        children: [{
                            label: '三级 2-2-1'
                        }]
                    }]
                }, {
                    label: '一级 3',
                    children: [{
                        label: '二级 3-1',
                        children: [{
                            label: '三级 3-1-1'
                        }]
                    }, {
                        label: '二级 3-2',
                        children: [{
                            label: '三级 3-2-1'
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                highlightCurrent: false,
                defaultExpandAll: false
            }
        },
        mounted() {
        },
        methods: {
            onSubmit() {
                console.log('submit!')
            },
            handleClick(row) {
                console.log(row)
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`)
            }
        },
        components: {}
    }
</script>
<style scoped lang="less">
    .el-button--primary {
        background-color: #5586FB;
    }

    .el-button--danger {
        background-color: #F53535;
    }

    .content-l {
        float: left;
        width: 20%;
        height: 8.4rem;
        background-color: #fff;
        padding: .4rem .6rem;
    }

    .content-r {
        float: left;
        margin-left: .3rem;
        width: 75%;
        height: 8.4rem;
        background-color: #fff;
        padding: .4rem .6rem;

        h3 {
            margin-bottom: 1rem;
        }

        .el-form {
            margin-left: -.6rem;
        }

        .el-input {
            width: 60%;
            min-width: 40%;
        }

        .btn {
            margin-top: .8rem;
            /*text-align: center;*/
            margin-left: 10%;
        }
    }
</style>

